<template>
	<view class='content'>
		<view class="search">
			<u--input
				placeholder="请输入昵称/手机号/IC卡号"
				prefixIcon="search"
				shape="circle"
				v-model="keyword"
				prefixIconStyle="font-size: 22px;color: #38c9b2"
			>
				<template slot="suffix">
					<u-button
						color="#38c9b2"
						@tap="search"
						text="搜索"
						type="success"
						shape='circle'
						size="mini"
					></u-button>
				</template>
			</u--input>
		</view>
		
		<view class="List">
			<view class='list_header'>
				<view class="">
					用户昵称
				</view>
				<view class="">
					手机号码
				</view>
				<view class="">
					IC卡号
				</view>
				<view class="">
					解/绑卡
				</view>
			</view>
			
			<view class="list_header" v-for="(item, index) in list" :key="index">
				<view>{{ item.nickname}}</view>
				<view>{{ item.mobile}}</view>
				<view>{{ item.IC_Number}}</view>
				<view v-if="item.is_bind == 0" class='bind' @click='add(item)'>
					绑定IC卡
				</view>
				<view v-if="item.is_bind == 1" class='unbind' @click='del(item)'>
					解绑IC卡
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<u-modal :show="show"  title="绑定IC卡" showCancelButton @cancel="show=false" @confirm="submit">
			<view class="slot-content">
				<u--form
						labelPosition="top"
						labelWidth='100px'
						:model="model"
						:rules="rules"
						ref="uForm"
						
				>
					
					<!-- <u-form-item
							label="用户姓名"
							prop="real_name"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="model.real_name"
								placeholder='请输入用户姓名'
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
							label="身份证号"
							prop="id_number"
							borderBottom
							ref="item1"
							
					>
						<u--input
								v-model="model.id_number"
								placeholder='请输入身份证号'
								border="none"
						></u--input>
					</u-form-item> -->
					<u-form-item
							label="IC卡号"
							prop="ic_number"
							borderBottom
							ref="item1"
							
					>
						<u--input
								v-model="model.ic_number"
								placeholder='请输入IC卡号'
								border="none"
						></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
		
		<u-modal :show="showUnbind"  title="解绑IC卡" showCancelButton cancelText="否" confirm-text="是" @cancel="showUnbind=false" @confirm="unbind">
			<view class="slot-content">
				提示：您确认解除此IC卡的绑定关系吗？
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loading',
				page: 1,
				pagesize: 10,
				list: [],
				ReachBottom: false,
				keyword: '',
				show: false,
				showUnbind: false,
				model: {
					real_name: '',
					id_number: '',
					ic_number: ''
				},
				user_id: '',
				rules: {
					real_name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					],
					id_number: [
						{
							required: true,
							message: '请输入身份证',
							trigger: ['blur','change'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								return this.$u.test.idCard(value)
							},
							message: '身份证不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur','change'],
						}
					],

					ic_number: [
						{
							required: true,
							message: '请输入IC卡号',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		onLoad() {
			this.gethomeData()
		},
		// 上拉加载
		onReachBottom() {
		
			let _self = this
			console.log('reach')
		
			uni.showNavigationBarLoading()
			// console.log('reach');
			if(_self.ReachBottom){
				_self.status = 'loading'
				setTimeout(function() {
					_self.page++;
					_self.gethomeData();
					uni.hideNavigationBarLoading()
				}, 2000);
			}
			
		
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			console.log('refresh');
			setTimeout(function() {
				this.page = 1
				uni.stopPullDownRefresh(); //停止下拉刷新动画
				this.gethomeData()
			}, 1000);
		},
		methods: {
			search(){
				this.page = 1
				this.gethomeData()
			},
			add(item){
				this.show = true
				this.user_id = item.user_id
			},
			submit(){
				var _this = this
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					_this.bindIC()
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			unbind(){
				var _this = this
				uni.request({
					url: 'http://www.yndzfl.cn/wxsite/Staff/unbindICNumber',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						token: uni.getStorageSync('token'),
						user_id: _this.user_id
					},
					success(res) {
						console.log(res)
						if(res.data.code == 1){
							_this.showUnbind = false
							_this.gethomeData()
						}else{
							
						}
						
					}
				})
			},
			del(item){
				this.user_id = item.user_id,
				this.showUnbind = true
			},
			bindIC(){
				var _this = this
				uni.request({
					url: 'http://www.yndzfl.cn/wxsite/Staff/bindICNumber',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						token: uni.getStorageSync('token'),
						user_id: _this.user_id,
						..._this.model
					},
					success(res) {
						console.log(res)
						if(res.data.code == 1){
							_this.show = false
							_this.gethomeData()
						}else{
							
						}
						
					}
				})
			},
			gethomeData(){
				var _this = this
				uni.request({
					url: 'http://www.yndzfl.cn/wxsite/Staff/userList',
					method: 'POST',
					header:{
						"Content-Type" : "application/x-www-form-urlencoded"
					},
					data: {
						token: uni.getStorageSync('token'),
						page: _this.page,
						pagesize: _this.pagesize,
						keyword: _this.keyword
					},
					success(res) {
						console.log(res)
						if(res.data.code == 1){
							if (res.data.data.length < 10) {
								_this.ReachBottom = false
								// uni.showToast({
								// 	title: '没有更多数据了',
								// 	icon: "none"
								// });
								_this.status = 'nomore'
							}else{
								_this.ReachBottom = true
								_this.status = 'loadmore'
							}
							if (_this.page != 1) {
								_this.list = _this.list.concat(res.data.data)
							} else {
								_this.list = res.data.data
							}
							
						}else if(res.data.code == -1){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}else if(res.data.code == 408){
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							uni.reLaunch({
								url: '/pages/admin/login'
							})
						}	
						
					}
				})
			}
		}
	}
</script>

<style scoped>
.search{
	padding: 20px 20px 10px 20px;
}
.List{
	margin-top: 0px;
}
.list_header{
	background: #fff;
	display: flex;
	justify-content: start;
	align-items: center;
	height: 50px;
	line-height: 50px;
	margin-top: 10px;
}
.list_header view{
	width: 25%;
	text-align: center;
	font-size: 13px;
	color: #666;
}
.list_header .bind{
	color: #2C7FDD;
}
.list_header .unbind{
	color: #FC2D03;
}
.slot-content{
	width: 100%;
}
</style>
